<template>

  <div>
    <el-card >
      <el-table max-height="560"
                :data="pdfResourceList"
                style="width: 100%">
        <el-table-column
          prop="name"
          label="视频名称">
        </el-table-column>

        <el-table-column
          prop="length"
          label="资源大小">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          min-width="100"
          width="100">
          <template slot-scope="scope">
            <el-button @click="pdfView(scope.row, 1)" type="text" size="small">分页查看</el-button>
            <el-button @click="pdfView(scope.row, 2)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

    <el-card>
      <el-row>
        <el-col :span="12">
          <p>开发</p>
          <img :src="base64PageImageDev" v-if="base64PageImageDev" />
        </el-col>
        <el-col :span="12">
          <p>生产</p>
          <img :src="base64PageImagePred" v-if="base64PageImagePred" />
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "PdfViewList",
    data(){
      return {
        // 可以看的pdf文件
        pdfResourceList:[],
        pdfSrc: null,
        // base64的二维码图片- 开发
        base64PageImageDev: null,
        // base64的二维码图片- 生产
        base64PageImagePred: null,
      }
    },
    methods: {
      /**
       * 生成二维码
       * @param url 页面二维码
       */
      getPageUrl(url){
        http.post("/pdf/getPageUrl", {
          dev: 'dev',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64PageImageDev = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })

        // 生产的
        http.post("/pdf/getPageUrl", {
          dev: 'prod',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64PageImagePred = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * pdf预览- 分页
       * @param obj 后台的pdf地址信息
       * @param type 1 分页看 2 一次全部加载看
       */
      pdfView(obj, type){
        http.getFileStream("/pdf/readPdf", {
          path: obj.path
        }).then(response => {
          if (!response){
            return
          }
          // let res = response.data;
          // if (res.status === 'error'){
          //   if (res.code !== 401){
          //     this.$message.error(res.msg);
          //   }
          //   return
          // }
          this.pdfSrc = this.getObjectURL(response.data)

          let routeData;
          if (type === 1){
            routeData = this.$router.resolve({path:'/toPdfView', query:{pdfSrc: this.pdfSrc}});
          } else {
            routeData = this.$router.resolve({path:'/toPdfView2', query:{pdfSrc: this.pdfSrc}});
          }
          window.open(routeData.href, '_blank');


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 返回的流数据转换为url
       * @param file 文本
       * @return {null}
       */
      getObjectURL(file) {
        let url = null;
        // basic
        if (window.createObjectURL !== undefined) {
          url = window.createObjectURL(file);

        } else if (window.webkitURL !== undefined) {
          // webkit or chrome
          try {
            url = window.webkitURL.createObjectURL(file);
          } catch (error) {
          }
        } else if (window.URL !== undefined) {
          // mozilla(firefox)
          try {
            url = window.URL.createObjectURL(file);
          } catch (error) {
          }
        }
        return url;
      },
      /**
       * 读取可查看的视频的资源
       */
      getPdfList(){
        http.post("/pdf/getPdfList", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.pdfResourceList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getPdfList()
      this.getPageUrl()
    }
  }
</script>

<style scoped>

</style>
